<template>
  <div>
    <ContainerTitle text="我申报的政策"></ContainerTitle>
    <div class="msgDiv">
      <el-table
        :data="myApplys"
        style="width: 100%"
        height="400"
        :border="true"
        :header-cell-style="{ background: '#eef1f6', color: '#666666' }"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column
          prop="no"
          label="政策文号"
          width="80"
          show-overflow-tooltip
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="政策名称"
          width="200"
          :resizable="false"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span class="rowBtn" @click="toDetail(scope.row)">
              {{ scope.row.policyName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="申报状态" width="100" :resizable="false">
          <template slot-scope="scope">
            <span
              :style="
                'color: ' + formatApplyStatus(scope.row.applyStatus).color
              "
              >{{ formatApplyStatus(scope.row.applyStatus).label }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="申报时间"
          width="200"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          prop="redemptionStatus"
          label="是否兑现"
          width="80"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span
              :style="
                'color: ' +
                formatIsRedemptionStatus(scope.row.redemptionStatus).color
              "
            >
              {{ formatIsRedemptionStatus(scope.row.redemptionStatus).label }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="closeReason"
          label="申报失败原因"
          width="160"
          show-overflow-tooltip
          :resizable="false"
        >
          <template slot-scope="scope">
            <div :style="scope.row.applyStatus == 4 ? 'color: #D00000' : ''">
              {{ scope.row.applyStatus == 4 ? scope.row.closeReason : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          :resizable="false"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <div style="white-space: nowrap">
              <span
                class="rowBtn"
                v-if="
                  scope.row.applyStatus == 4 &&
                  checkTime1(scope.row.policyClosingDate)
                "
                @click="reApply(scope.row)"
                >再次申报</span
              >
              <span
                class="rowBtn"
                @click="toSend(scope.row)"
                v-if="
                  scope.row.redemptionType == 1 &&
                  scope.row.applyStatus == 3 &&
                  checkTime(scope.row.acceptBeginDate) &&
                  checkTime1(scope.row.acceptEndDate)
                "
                >申请兑现</span
              >
              <span class="rowBtn" @click="toDetail(scope.row)">详情</span>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <div class="ta_empty">
            <span>暂无数据</span>
          </div>
        </template>
      </el-table>
    </div>

    <ContainerTitle text="我的兑现申请"></ContainerTitle>
    <div class="msgDiv">
      <el-table
        :data="myApplyRedemptionPolicys"

        height="400"
        :border="true"
        :header-cell-style="{ background: '#eef1f6', color: '#666666' }"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column
          prop="no"
          label="编号"
          width="100"
          show-overflow-tooltip
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="政策名称"
          width="200"
          :resizable="false"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span class="rowBtn" @click="toDetail(scope.row, 1)">
              {{ scope.row.policyName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="申报状态" width="100" :resizable="false">
          <template slot-scope="scope">
            <span
              :style="
                'color: ' + formatApplyStatus(scope.row.applyStatus).color
              "
              >{{ formatApplyStatus(scope.row.applyStatus).label }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="申报时间"
          width="200"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="申报失败原因"
          width="120"
          show-overflow-tooltip
          :resizable="false"
        >
          <template slot-scope="scope">
            <div :style="scope.row.applyStatus == 4 ? 'color: #D00000' : ''">
              {{ scope.row.applyStatus == 4 ? scope.row.closeReason : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="redemptionTime"
          label="兑现申请时间"
          width="160"
          :resizable="false"
        >
          <template slot-scope="scope">
            <span>
              {{
                scope.row.redemptionTime != null
                  ? scope.row.redemptionTime
                  : "-"
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="兑现申请状态" width="160" :resizable="false">
          <template slot-scope="scope">
            <span
              :style="
                'color: ' +
                formatRedemptionStatus(scope.row.redemptionStatus).color
              "
            >
              {{ formatRedemptionStatus(scope.row.redemptionStatus).label }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="兑现结果" width="160" :resizable="false">
          <template slot-scope="scope">
            <div
              :style="scope.row.redemptionStatus == 3 ? 'color: #10a217' : ''"
            >
              {{ scope.row.redemptionStatus == 3 ? "已兑现" : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="兑现失败原因"
          width="160"
          show-overflow-tooltip
          :resizable="false"
        >
          <template slot-scope="scope">
            <div
              :style="scope.row.redemptionStatus == 4 ? 'color: #D00000' : ''"
            >
              {{
                scope.row.redemptionStatus == 4
                  ? scope.row.redemptionCloseReason
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="140"
          :resizable="false"
          fixed="right"
        >
          <template slot-scope="scope">
            <span
              class="rowBtn"
              @click="toSend(scope.row)"
              v-if="
                scope.row.redemptionStatus == 4 &&
                checkTime1(scope.row.acceptEndDate)
              "
              >重新申请</span
            >
            <span
              class="rowBtn"
              @click="toSend(scope.row)"
              v-if="
                scope.row.applyStatus == 3 &&
                scope.row.redemptionStatus == null &&
                checkTime(scope.row.acceptBeginDate) &&
                checkTime1(scope.row.acceptEndDate)
              "
              >申请兑现</span
            >
            <span class="rowBtn" @click="toDetail(scope.row, 1)">详情</span>
          </template>
        </el-table-column>
        <template slot="empty">
          <div class="ta_empty" style="width: 60px">
            <span>暂无数据</span>
          </div>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { checkLogin } from "@/utils/util.js"
import { getMyApplyPolicy, getMyApplyRedemptionPolicy } from '@/common/api/company.js'

export default {
  name: "company",
  data() {
    return {
      count: 0,
      myApplys: [],
      myApplyRedemptionPolicys: [],
      applyStatusList: [
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "审核中",
        },
        {
          value: 3,
          label: "审核通过",
          color: "#10a217",
        },
        {
          value: 4,
          label: "审核不通过",
          color: "#d00000",
        },
        {
          value: 5,
          label: "已过期",
        },
      ],
      redemptionStatusList: [
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "审核中",
        },
        {
          value: 3,
          label: "审核通过",
          color: "#10a217",
        },
        {
          value: 4,
          label: "审核未通过",
          color: "#d00000",
        },
        {
          value: 5,
          label: "已到期",
        },
      ]
    };
  },
  methods: {
    /**
     * 获取我申报的政策
     */
    getMyApply() {
      let ns = this;
      getMyApplyPolicy().then(res => {
        ns.myApplys = res.rows;
      })
    },
    /**
     * 格式化显示申报状态
     * @param applyStatus 要格式化显示的申报状态
     * @return 格式化后的申报状态对象
     */
    formatApplyStatus(applyStatus) {
      let ns = this;
      for (let i = 0; i < ns.applyStatusList.length; i++) {
        if (applyStatus == ns.applyStatusList[i].value) {
          return ns.applyStatusList[i];
        }
      }
      return { label: "" };
    },
    /**
     * 格式化显示是否兑现
     */
    formatIsRedemptionStatus(redemptionStatus) {
      let ns = this;
      if (redemptionStatus == 3) {
        return { label: "是", color: "#10a217" };
      } else {
        return { label: "否" };
      }
    },
    /**
     * 格式化显示兑现状态
     * @param applyStatus 要格式化显示的兑现状态
     * @return 格式化后的兑现状态对象
     */
    formatRedemptionStatus(redemptionStatus) {
      let ns = this;
      for (let i = 0; i < ns.redemptionStatusList.length; i++) {
        if (redemptionStatus == ns.redemptionStatusList[i].value) {
          return ns.redemptionStatusList[i];
        }
      }
      return { label: "-" };
    },
    /**
     * 再次申报时间
     * @param 政策对象
     */
    reApply(policy) {
      let ns = this;
      ns.$router.push({
        name: "companyReApply",
        query: {
          name: policy.policyName,
          applyId: policy.applyId,
          policyId: policy.policyId,
        },
      });
    },
    /**
     * 跳转政策详情
     * @param policy 政策对象
     */
    toDetail(policy, type) {
      // console.log(policy,type)
      let ns = this;
      // 这里原本是if(type),原目的应该是根据传入的type不同传的参数不同,一个是undefined一个是1,但是写反了
      // if(type) {
      //   ns.$router.push({
      //   path: "policyDetail",
      //   query: { id: policy.policyId, },
      // });
      // }else {
      //   ns.$router.push({
      //   path: "policyDetail",
      //   query: { id: policy.policyId, entry: 1 },
      // });
      // }
      // 修改后,应该是只是判断是不是游客,所以从这里跳转的都应该设置为entry: 1
      ns.$router.push({
        name: "policyDetail",
        query: { id: policy.policyId, entry: 1 },
      });
    },
    /**
     * 获取我的兑现申请
     */
    getMyApplyRedemptionPolicys() {
      let ns = this;
      getMyApplyRedemptionPolicy().then(res => {
        ns.myApplyRedemptionPolicys = res.rows;
      })
    },
    /**
     * 跳转申请兑现
     * @param policy 政策对象
     */
    toSend(policy) {
      let ns = this;
      ns.$router.push({
        name: "companySendUpload",
        query: {
          applyId: policy.applyId,
          redemptionId: policy.redemptionId,
          addItemAgain: policy.redemptionStatus == 4 ? 1 : 0,
        },
      });
    },
    checkTime1(t) {
      var nowDate = new Date();
      t = t + " 23:59:59";
      return (
        new Date(
          `${nowDate.getFullYear()}-${
            nowDate.getMonth() + 1
          }-${nowDate.getDate()}`
        ).getTime() <= new Date(t).getTime()
      );
    },
    checkTime(t) {
      var nowDate = new Date();
      t = t + " 00:00:00";
      return (
        new Date(
          new Date(new Date().toLocaleDateString()).getTime()
        ).getTime() >= new Date(t).getTime()
      );
    },
  },
  mounted() {
    console.log("mounted");
    let ns = this;
    if (checkLogin(ns)) {
      ns.getMyApply();
      ns.getMyApplyRedemptionPolicys();
    }
    this.count++;
  },
  activated() {
    console.log("activated");
    if (this.count != 1) {
      let ns = this;
      if (checkLogin(ns)) {
        ns.getMyApply();
        ns.getMyApplyRedemptionPolicys();
      }
    }
    this.count++;
  },
};
</script>

<style scoped>
::v-deep .el-table tbody tr:hover > td {
  background-color: #ffffff !important;
}
::v-deep .el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #eeeeee;
}
::v-deep .el-table .has-gutter .gutter {
  background-color: #eef1f6;
}

::v-deep .is-leaf {
  font-weight: normal;
}
::v-deep .el-table td,
.el-table th {
  padding: 10px 0;
}
.rowBtn {
  text-decoration: underline;
  color: #045db9;
  margin-right: 5px;
}
.rowBtn:hover {
  cursor: pointer;
}
</style>
